<template>
  <TabSwitcher :tabs="['科目一', '科目四', '满分学习', '注销重考']" @tab-change="handleTabChange">
    <template #tab-0>
      <pc-question-content v-if="showComponentData" :content-data="showComponentData" :statistics-data="statisticsData"
        :key="showKey"></pc-question-content>
    </template>
    <template #tab-1>
      <pc-question-content v-if="showComponentData" :content-data="showComponentData" :statistics-data="statisticsData"
        :key="showKey"></pc-question-content>
    </template>
    <template #tab-2>
      <pc-question-content v-if="showComponentData" :content-data="showComponentData" :statistics-data="statisticsData"
        :key="showKey"></pc-question-content>
    </template>
    <template #tab-3>
      <pc-question-content v-if="showComponentData" :content-data="showComponentData" :statistics-data="statisticsData"
        :key="showKey"></pc-question-content>
    </template>
  </TabSwitcher>
</template>

<script lang="ts" setup>
import './home.scss'
import TabSwitcher from '@/components/tabbar/TabSwitcher.vue'
import PcQuestionContent from '@/views/homepage/components/PcQuestionContent.vue'
import { ref, computed, onMounted, watch } from 'vue'
import { getStoreInfo, getDiyPage, getProgressToCarMode } from '@/api/userApi'
import { useUserStore } from '@/store/user'
import subjectOne from './components/subjectOne.vue'

interface pageItem {
  id: number
  name: string
  value: number
  showComponentList: []
}

const pageData = ref<pageItem[]>([])
const activeIndex = ref(0)
const showKey = ref(0)

const showComponentData = ref<any>()
const categoryId = ref(1) //分组类型 ：科一 1 科四 4 满分学习 5 注销重考 6

const activeTabList = ref<any>({
  1: 0,
  4: 1,
  5: 2,
  6: 3
})

const handleTabChange = (index: number) => {
  activeIndex.value = index
  showComponentData.value = pageData.value[activeIndex.value].showComponentList
  const categoryMap = [1, 4, 5, 6]
  categoryId.value = categoryMap[index] || 1
  getQuestionData()
  userStore.setCategoryId(Number(categoryId.value))
  userStore.setActiveTab(index)
}
const userStore = useUserStore()
const getHeadInfo = async () => {
  const res = await getStoreInfo()
  if (res.code === '00000') {
    categoryId.value = Number(res.data.categoryId)
    userStore.setActiveTab(activeTabList.value[categoryId.value])
    userStore.setCategoryId(Number(categoryId.value))
    userStore.setStoreInfo(res.data)
  }
}

const getDiyPageData = async () => {
  const res = await getDiyPage({
    pageType: 5,
  })
  if (res.code === '00000') {
    pageData.value = JSON.parse(res.data.property)
    showComponentData.value = pageData.value[activeIndex.value].showComponentList
    userStore.setPageForm(res.data.pageForm)
  }
}

const statisticsData = ref<any>({})
const getQuestionData = async () => {
  try {
    const res = await getProgressToCarMode({
      id: userStore.storeInfo.memberId,
      carModelId: userStore.storeInfo.carModelId,
      categoryId: categoryId.value,
    })
    if (res.code === '00000') {
      statisticsData.value = res.data.find((e: any) => e.categoryId === categoryId.value)
      userStore.setStatisticsData(statisticsData.value)
      showKey.value = new Date().getTime()
    }
  } catch {
  } finally {
  }
}

watch(
  () => userStore.storeInfo.memberId,
  (newVal) => {
    if (newVal) {
      getQuestionData()
    }
  },
  { immediate: true },
)

onMounted(() => {
  getHeadInfo()
  getDiyPageData()
  activeIndex.value = userStore.activeTab
  categoryId.value = userStore.categoryId
  userStore.setCategoryId(categoryId.value)
  console.log(categoryId.value, "categoryId.value===");

})
</script>
<style scoped lang="scss"></style>
